<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>hot pot 博客发布</title>
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/blog/add.css}" />
    <link rel="stylesheet" href="/plugins/editor.md-master/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/jquery/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/hp-ui/hp-ui.js}"></script>
    <script src="/plugins/editor.md-master/editormd.js"></script>

    <script type="text/javascript">
        var blogEditor;

        $(function() {
            // You can custom @link base url.
            // editormd.urls.atLinkBase = "https://github.com/";

            blogEditor = editormd("md-editor", {
                width     : "100%",
                height    : 720,
                toc       : true,       // // Using [TOC] 生成目录
                tex       : true,       // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,       // 开启流程图支持，默认关闭
                sequenceDiagram: true,  // 开启时序/序列图支持，默认关闭,
                //atLink    : false,    // disable @link
                //emailLink : false,    // disable email address auto link
                codeFold  : true,
                emoji     : true,       // 开启表情
                todoList  : true,
                path      : '/plugins/editor.md-master/lib/',
                //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                saveHTMLToTextarea: true,  // 保存 HTML 到 Textarea
                imageUpload: true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload/editormd/image",//注意你后端的上传图片服务地址
                // theme        : "dark",//工具栏主题
                // previewTheme : "dark",//预览主题
                // editorTheme  : "pastel-on-dark",//编辑主题
                toolbarIcons : function() { // toolbarModes
                    /*return ["undo", "redo", "|",
                        "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                        "h1", "h2", "h3", "h4", "h5", "h6", "|",
                        "list-ul", "list-ol", "hr", "|",
                        "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                        "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                        "help", "info", "|", "publish", "old", "home"];*/
                    // Or return editormd.toolbarModes[name]; // full, simple, mini
                    // Using "||" set icons align right.
                    var toolBarIconArray=editormd.toolbarModes["full"];
                    toolBarIconArray.push("publish");
                    toolBarIconArray.push("old");
                    toolBarIconArray.push("home");
                    return toolBarIconArray;
                },
                /*自定义功能按钮*/
                toolbarIconTexts :  {
                    publish: "<span bgcolor='gray'>发布</span>",
                    home: "<span bgcolor='red'>首页</span>",
                    old: "<span bgcolor='yellow'>返回老版本</span>"
                },
                toolbarHandlers : {
                    publish: function () {
                        submit();
                    },
                    home   : function () {
                        window.location.href = "/"
                    },
                    old   : function () {
                        window.location.href = "/blog/publish/"
                    }
                },
                onload: function(){
                    this.width("100%");
                    this.height(720);
                }
            });
        });

        function submit() {
            if(validation()) {
                document.getElementById("article").submit()
            }
        }

        function validation() {
            if (!document.getElementById("type")) {
                alert("请选择文章类型")
                return false;
            }
            if (!document.getElementById("body")) {
                alert("博客内容为空，不会提交")
                return false;
            }
        }
    </script>
</head>
<body>
<header th:replace="~{fragments/header :: header}">...</header>
<article>
    <form id="article" action="/blog" method="post" onsubmit="return validation()">
        <div class="title-wrapper">
            <div class="hs-select-group">
                <p data-hp-id="type">请选择</p>
                <ul>
                    <li data-hp-val="1">Redis</li>
                    <li data-hp-val="2">Java</li>
                    <li data-hp-val="3">MySql</li>
                </ul>
            </div>
            <input type="hidden" id="type" name="type"/>
            <input type="hidden" id="docType" name="docType" value="2" />
            <input type="text" name="title" class="hp-input" placeholder="文章标题，支持200个汉字"/>
        </div>

        <div id="md-editor">
        <textarea class="editormd-markdown-textarea" id="body" name="body"
                  style="display:none;" ></textarea>
<!--            <textarea class="editormd-html-textarea" id="answerHtml" name="answerHtml"></textarea>-->
        </div>
        <div class="brief-wrapper">
            <input name="brief" type="text" class="hp-input" placeholder="请填写文章摘要，最多200个字，默认为正文前200个字符">
        </div>
        <button class="hp-btn" type="submit">保存</button>
    </form>
</article>
</body>
</html>
